<template>
  <div class="table">
    <div class="headerBtn">    
      <a-descriptions title="数据详情">
        <a-descriptions-item label="试剂盒名称">
          {{infoObj.kitName}}</a-descriptions-item>
        <a-descriptions-item label="组分数">
          {{infoObj.comNumber}}人份
        </a-descriptions-item>
        <a-descriptions-item label="采样类型">
          {{infoObj.samplingType}}
        </a-descriptions-item>
        <a-descriptions-item label="来源">
          {{infoObj.source}}
        </a-descriptions-item>
        <a-descriptions-item label="创建人">
           {{infoObj.createdBy}}
        </a-descriptions-item>
        <a-descriptions-item label="创建时间">
         {{infoObj.createdTime}}
        </a-descriptions-item>
      </a-descriptions>
     
      </div>      
      <div style="display: flex;align-items: center;">
        <span>  基因座：</span>
        <div style="display: flex; align-items: center;">
      <a-input v-model="pageParams.locusName"  placeholder="请输入基因座" />
      <a-button type="primary" @click="query" style="margin-left: 10px;">查询</a-button>
    </div>
      </div>  

    <a-table :columns="columnsList.columns" :data-source="columnsList.datatable" :pagination="false" 
    :loading="loading" 
    :rowspan-method="rowspanMethod">
      <span slot="name" slot-scope="text">{{ text }}</span>
      <div  slot="alleleVoList" slot-scope="text,record" >
        <div v-for="(item,index) in record.alleleVoList" :key="item.allele.splitId">{{ item.allele }}</div>
      
      </div>
      <div slot="alleleVoList1" slot-scope="text,record" >
        <div v-for="(item,index) in record.alleleVoList" :key="item.allele.splitId">{{ item.peakArea }}</div>
      </div> 
      <span slot="genotypes" slot-scope="text,record">
        <div v-for="(item,index) in record.genotypes" :key="item">{{ item.genotype }}</div>
      </span>     
   
      <span slot="operation" slot-scope="text, record">
        <a-button type="primary" @click="lookInfo(record.kitId)">详情</a-button>
        <a-button type="primary" @click="edit(record, text)">编辑</a-button>
        <a-button type="danger" @click="del(record.kitId)">删除</a-button>
      </span>
    </a-table>
    <div class="pagination">
      <a-pagination
        v-model="pageParams.pageNum"
        :total="total"
        show-less-items
        @change="PageNumChange"
      />
    </div>

  
   
    
  </div>
</template>

<script>

import { dataSource as ds } from "@/services";
import surelyTable from ".";



export default {
  name: "Table", 
  data() {
    return {
      loading: false,
      total: 0,
      infoObj:{},
      pageParams:{
        locusName:'',
        pageNum: 1,
        pageSize: 10,
      },
      columnsList: {
        columns: [
          {
            title: '序号',
            dataIndex: 'name',
            customRender: function (text, record, index) {
              return parseInt(index) + 1
            },
            align: "center"
          },
          {
            title: '基因座',
            dataIndex: 'locusName',
            key: 'locusName',
            align: "center"
          },
          {
            title: '等位基因',
            dataIndex: 'alleleVoList',  
            key: 'alleleVoList',          
            align: "center",
            scopedSlots: { customRender: 'alleleVoList' },
            
          },
          {
            title: '峰面积',
            dataIndex: 'alleleVoList1',  
            key: 'alleleVoList',          
            align: "center",
            scopedSlots: { customRender: 'alleleVoList1' },
          },
          {
            title: '示例个体',
            dataIndex: 'genotypes',
            key: 'genotypes',
            align: "center",
            scopedSlots: { customRender: 'genotypes' },
          },         
          

        ],
        datatable: []
      },

      samplingTypeList: [
        { label: "血斑", value: 1 },
        { label: "唾液斑", value: 2 },
        { label: "汗斑", value: 3 },
        { label: "精斑", value: 4 },
        { label: "毛发", value: 5 },
        { label: "烟蒂", value: 6 },
        { label: "骨骼", value: 7 },
        { label: "牙齿", value: 8 },
        { label: "脱落上皮细胞", value: 9 },
        { label: "其他", value: 10 },

      ],
    
      
    };
  },
  created() {
    this.getTableList();
    this.getJyList()
    console.log(this.$route.query.kitId,"2222");
  },
  methods: {
    getTableList() {
      this.loading = true;
      let obj={
        locusName:this.locusName,
        kitId:this.$route.query.kitId
      }
      ds.queryDetailsKitInfo({kitId:obj.kitId}).then((res) => {
        if (res.retcode == "success") {         
          this.loading = false;
          this.infoObj=res.data
          this.samplingTypeList.forEach(item => {
            if(item.value==res.data.samplingType){
              this.infoObj.samplingType=item.label
            }
            
          });
     
        }
      });
      
    },
    // 查询
    query() {
      this.getJyList()
    }, 
    getJyList(){
        this.pageParams.kitId=this.$route.query.kitId
      ds.queryDataByLocusName(this.pageParams).then((res)=>{
        if (res.retcode == "success") {         
          this.loading = false;
          
          this.columnsList.datatable = res.data.list;
          this.total = res.data.total
        }
      })
    },
    
    // 查看详情
  
    // 改变页码
    PageNumChange(page, pageSize) {
      this.pageParams.pageNum = page;
      this.pageParams.pageSize = pageSize;
      this.getJyList();
    },
    rowspanMethod({ row, column, rowIndex, columnIndex }) { 
      if (columnIndex === 0) { 
        if (rowIndex % 2 === 0) { 
          return 2; 
        } else { 
          return 0; 
      } } 
    },

    
  },
};
</script>

<style scoped lang="less">
:deep(.ant-form-item-control-wrapper) {
  width: 200px !important;
}

.table {
  background-color: @base-bg-color;
  padding: 24px;
 
}

.headerBtn {
  display: flex;
  justify-content: space-between;


}

button {
  margin-right: 10px;
}

.pagination {
  height: 60px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.temDown{
  font-size: 16px;
  color: #719dff;
  cursor: pointer;
}
.jyz li{
  display: flex;
  list-style: none;
}
.db{
  display: block;
}
</style>